<template>
  <div v-if="permissionsLists(122)">
    <page-header :title="$t('m.Whitelist')">
      <template v-if="selectTab == 2">
        <el-button
          type="primary"
          @click="$refs.tableWhiteListRule.openDialog(1, '')"
          v-if="getUserType() == 1 && permissionsLists(145)"
        >
          {{ $t('m.General_rule') }}
        </el-button>
        <el-button
          type="primary"
          v-if="permissionsLists(147)"
          @click="$refs.tableWhiteListRule.openDialog(2, '')"
        >
          {{ $t('m.Special_merchant') }}
        </el-button>
      </template>

      <el-button
        v-if="selectTab == 1 && permissionsLists(150)"
        type="primary"
        @click="$refs.tableWhiteListUser.openDialog('')"
      >
        {{ $t('m.Add_whitelste') }}
      </el-button>
    </page-header>

    <div class="container box-index">
      <div class="box_index">
        <!--tab栏-->
        <div
          class="el_table_div"
          style="padding-bottom:0;"
          v-show="permissionsLists(149) || permissionsLists(144)"
        >
          <el-tabs v-model="selectTab" @tab-click="switchTab">
            <el-tab-pane
              name="1"
              :label="$t('m.Whitelisted_users')"
              v-if="permissionsLists(149)"
            >
            </el-tab-pane>
            <el-tab-pane
              name="2"
              :label="$t('m.Whitelist_rules')"
              v-if="permissionsLists(144)"
            >
            </el-tab-pane>
          </el-tabs>
        </div>
        <table-white-list-rule
          ref="tableWhiteListRule"
          v-if="selectTab == 2 && permissionsLists(144)"
        />
        <table-white-list-user
          ref="tableWhiteListUser"
          @changeTab="changeTab"
          v-if="selectTab == 1 && permissionsLists(149)"
        />
      </div>
    </div>
  </div>
</template>
<script>
import TableWhiteListRule from '@/components/tables/table-white-list-rule.vue'
import TableWhiteListUser from '@/components/tables/table-white-list-user.vue'

export default {
  components: { TableWhiteListUser, TableWhiteListRule },
  data () {
    return {
      // options 1-白名单用户 2-白名单规则
      permissionsIds: [],
      selectTab: ''
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (this.permissionsLists(149)) {
      this.selectTab = '1'
    } else if (this.permissionsLists(144)) {
      this.selectTab = '2'
    }
  },
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },

    // 切换tab
    switchTab (tab) {
      // console.log('switchTab', tab.name, this.selectTab)
      // this.$nextTick(() => {
      //   if (tab.name == '2') {
      //     this.$refs.tableWhiteListRule.params = this.$refs.tableWhiteListRule.$options.data.call(
      //       this
      //     ).params
      //     this.$refs.tableWhiteListRule.getPage()
      //   }
      //   if (tab.name == '1') {
      //     this.$refs.tableWhiteListUser.params = this.$refs.tableWhiteListUser.$options.data.call(
      //       this
      //     ).params
      //     this.$refs.tableWhiteListUser.getPage()
      //   }
      // })
    },

    changeTab (val, id) {
      this.selectTab = '2'
    }
  }
}
</script>
<style scoped lang="scss"></style>
